<template>
    <a-select mode="multiple" :max-tag-count="2" onfocus="this.blur()" @click="openPanel" @deselect="remove" :allowClear="props.allowClear" :open="false" class="w-full" v-model:value="value" :options="options" :placeholder="props.placeholder">
    </a-select>
</template>
<script setup>
const emits = defineEmits(['update:value', 'update:options', 'change'])
const props = defineProps({
    formRef: Object,
    value: Array,
    options: Array,
    type: {
        type: String,
        default: 'USERS',
    },
    placeholder: {
        type: String,
        default: '请选择',
    },
    allowClear: {
        type: Boolean,
        default: false,
    },
})

const state = reactive({
    value: [],
    options: [],
})

const inputVal = item => {
    if (item === undefined) {
        emits('update:value', undefined)
        emits('update:options', undefined)
    } else {
        emits('update:value', state.value)
        emits('update:options', item)
    }
    emits('change', item)
    props.formRef.ref.clearValidate(props.formRef.key)
}

//取消
const remove = val => {
    setTimeout(() => {
        let index = undefined
        let index2 = undefined
        state.value.forEach((element, i) => {
            if (element === val) {
                index = i
            }
        })
        if (index !== undefined) {
            state.value.splice(index, 1)
        }
    }, 100)
}

const openPanel = () => {
    if (props.disabled) return
    if (window.appType === '浏览器') {
        message.warning('请在钉钉客户端操作！')
        return
    }
    if (props.type === 'USERS') {
        dd.biz.contact.complexPicker({
            title:"选择成员(可多选)",
            multiple: true,
            pickedUsers: props.value,
            pickedDepartments:[],
            corpId: window.corpId,
            responseUserOnly:true
        }).then(res => {
            if (res.users && res.users.length) {
                let userIds = []
                let userNames = []
                res.users.forEach(element => {
                    element.label = element.name
                    element.value = element.emplId
                    userIds.push(element.emplId)
                    userNames.push(element.name)
                })
                state.options = res.users
                state.value = userIds
                inputVal(res.users)
            }
        })
    } else {
        dd.biz.contact
            .departmentsPicker({
                title: '选择部门（可多选）',
                corpId: window.corpId,
                multiple: true, //是否多选
                pickedDepartments: props.value, //已选部门
                disabledDepartments: [], //不可选部门
                requiredDepartments: [], //必选部门（不可取消选中状态）
            })
            .then(res => {
                if (res.departments && res.departments.length) {
                    let deptsId = []
                    let deptsName = []
                    res.departments.forEach(element => {
                        element.label = element.name
                        element.value = element.id
                        deptsId.push(element.id)
                        deptsName.push(element.name)
                    })
                    state.options = res.departments
                    state.value = deptsId
                    inputVal(res.departments)
                }
            })
    }
}
watch(
    () => props.options,
    (newVal, oldVal) => {
        state.options = XEUtils.clone(newVal, true)
    },
    { deep: true, immediate: true }
)
watch(
    () => props.value,
    (newVal, oldVal) => {
        state.value = newVal
    },
    { deep: true, immediate: true }
)

defineExpose({})
const { value, options } = toRefs(state)
</script>

<style>
.ant-select-selection-item-remove {
    display: none !important;
}
</style>